<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home</title>

    <script src="../public/vue/dist/vue.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="../public/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="../public/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="../public/bootstrap/dist/js/bootstrap.min.js"></script>


    <link rel="stylesheet" href="../public/summernote/dist/summernote.css">

    <script src="../public/summernote/dist/summernote.js"></script>
    <script src="../public/summernote/dist/lang/summernote-zh-CN.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <div class="container" id="noteCateApp" style="margin: 50px auto;">


        <div class="alert alert-info">
            <button type="button" @click="fnClear" class="btn btn-success">add</button>

        </div>


        <table class="table table-condensed table-bordered">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in noteCateList" :key="index">
                    <td>{{item.sname}}</td>
                    <td>{{item.ctime}}</td>
                    <td>

                        <button type="button" @click="fnUpdate(item)" class="btn btn-primary">modify</button>
                        <button type="button" @click="fnDeleteModal(item)" class="btn btn-danger">delete</button>

                    </td>
                </tr>
            </tbody>
        </table>


        <!-- add form  -->

        <div class="alert alert-success">
            <form class="form-horizontal" role="form">
                <div class="form-group" v-show="false">
                    <label for="firstname" class="col-sm-2 control-label">_id</label>
                    <div class="col-sm-10">
                        <input type="text" name="" id="input" class="form-control" v-model="noteCate._id">
                    </div>
                </div>
                <div class="form-group">
                    <label for="firstname" class="col-sm-2 control-label">名字</label>
                    <div class="col-sm-10">
                        <input type="text" name="" id="input" class="form-control" v-model="noteCate.sname">
                    </div>
                </div>



                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" @click="fnAdd" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </form>

        </div>


        <!-- 模态框（Modal） -->
        <div class="modal fade  bs-example-modal-sm" id="deleteConfirmModal" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">提示</h4>
                    </div>
                    <div class="modal-body"> 确定执行操作吗？</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" @click="fnDelete" class="btn btn-primary">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->



    </div>






</body>

</html>

<script>
    var vm = new Vue({
        el: '#noteCateApp',
        data: {
            deleteId: '',
            noteCate: {},
            noteCateList: []
        },
        methods: {

            // fnAddRow() {

            //     this.keywordArr.push({});

            // },
            // fnRemoveRow(indx) {

            //     this.keywordArr.splice(indx, 1);

            // },

            fnClear() {

                this.noteCate = {}
            },
            fnUpdate(item) {

                this.noteCate = item;
            },
            fnDeleteModal(item) {

                this.deleteId = item._id;
                $('#deleteConfirmModal').modal('show');
            },


            fnDelete() {

                $('#deleteConfirmModal').modal('hide');
                var _self = this;

                var deleteUrl = '../notes/cates/delete';
                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: deleteUrl,
                    data: {
                        _id: _self.deleteId
                    },
                    dataType: "json",
                    success: function (response) {
                        if (response.code == 0) {
                            _self.all();
                        }

                    }
                });

            },

            fnAdd() {

                var _self = this;

                var postUrl = '../notes/cates/add';
                if (this.noteCate._id) {
                    postUrl = '../notes/cates/update'
                }
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: _self.noteCate,
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                        if (response.code == 0) {

                            _self.noteCate = response.dat;
                            _self.all();
                        }

                    }
                });
            },


            all() {

                var _self = this;
                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "../notes/cates",
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                        if (response.code == 0) {

                            _self.noteCateList = response.dat;
                            console.log(response);
                        }

                    }
                });
            }
        },
        mounted() {

            this.all();
        }
    })
</script>